<template>
	<view class="feedback-container">
		<!-- 场景：整个反馈页面是一个从底部弹出的固定窗口 -->
		<!-- fixed: 当 textarea 在 position:fixed 的父元素中时，必须设置为 true，确保键盘弹起时计算位置正确。 -->
		<textarea
			class="feedback-textarea"
			:value="feedbackText"
			:placeholder="placeholderText"
			placeholder-class="textarea-placeholder"
			:maxlength="maxlength"
			:focus="isFocused"
			:auto-height="true"
			:fixed="true"
			:cursor-spacing="30"
			:cursor="cursorPosition"
			cursor-color="#007AFF"
			:confirm-type="confirmType"
			:confirm-hold="isSubmitting"
			:show-confirm-bar="true"
			:selection-start="selectionStart"
			:selection-end="selectionEnd"
			:adjust-position="true"
			:disable-default-padding="true"
			:hold-keyboard="false"
			:auto-blur="false"
			:disabled="isSubmitted"
			:ignoreCompositionEvent="true"
			inputmode="text"
			@focus="onFocus"
			@blur="onBlur"
			@input="onInput"
			@confirm="onConfirm"
			@linechange="onLineChange"
			@keyboardheightchange="onKeyboardHeightChange"
		></textarea>

		<view class="char-counter">{{ charCount }} / {{ maxlength }}</view>

		<view v-if="isSubmitted" class="submission-overlay">
			<text>感谢您的反馈！</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// --- 核心内容属性 ---
			// value: 输入框的当前内容。我们通过 v-model 或者 :value + @input 实现双向绑定。
			feedbackText: '',

			// --- 占位符与样式 ---
			// placeholder: 输入框为空时显示的占位文本。
			placeholderText: '请详细描述您的问题或建议，智能助手将为您分析...',
			// placeholder-class: 指定 placeholder 的样式类，可定义颜色、字体大小等。
			// 在 style 中定义了 .textarea-placeholder { color: #999; }

			// --- 状态控制属性 ---
			// disabled: 是否禁用输入框。提交成功后设为 true。
			isSubmitted: false,
			// focus: 控制输入框是否获得焦点。页面加载时设为 true 可自动拉起键盘。
			isFocused: true,
			// auto-focus: (此场景用 focus 属性代替) 自动聚焦，与 focus 作用类似，但通常用于页面初次加载。

			// --- 尺寸与限制 ---
			// maxlength: 最大输入长度。设为-1不限制。
			maxlength: 500,
			charCount: 0, // 用于实时显示字数
			// auto-height: 是否自动增高。设为 true 后，输入框会随内容行数增加而变高，样式中的 height 会失效。

			// --- 键盘与光标行为 ---
			// fixed: 已在 template 注释中说明。
			// cursor-spacing: 指定光标与键盘的距离（px），防止键盘挡住正在输入的内容。
			// cursor: 指定 focus 时的光标位置。-1表示在末尾。加载草稿时可用于定位。
			cursorPosition: -1,
			// cursor-color: 自定义光标颜色，匹配App主题色。
			// confirm-type: 设置键盘右下角按钮的文字。'send' 表示“发送”。
			confirmType: 'send',
			// confirm-hold: 点击完成按钮时是否保持键盘不收起。用于防止误触或需要连续操作的场景。
			isSubmitting: false, // 模拟提交中状态
			// show-confirm-bar: 是否显示键盘上方的“完成”栏。
			// selection-start & selection-end: 光标选择的起始和结束位置。用于加载草稿时高亮提示。
			selectionStart: -1,
			selectionEnd: -1
			// adjust-position: 键盘弹起时，是否自动上推页面，防止输入框被遮挡。
			// disable-default-padding: 去掉在iOS平台下默认的内边距，方便自定义样式。
			// hold-keyboard: focus时，点击页面其他地方不收起键盘。设为 false，提供标准的用户体验。
			// auto-blur: 键盘收起时，是否自动失去焦点。
			// ignoreCompositionEvent: 是否忽略输入法（如拼音）的合成事件。通常保持true以获得最终结果。
			// inputmode: 为输入优化键盘。'text' 是标准文本键盘。
		};
	},
	onLoad() {
		this.loadDraft();
	},
	methods: {
		// --- 业务逻辑方法 ---
		loadDraft() {
			// 模拟从本地存储加载草稿
			const draft = uni.getStorageSync('feedback_draft');
			if (draft) {
				this.feedbackText = draft;
				this.charCount = draft.length;
				this.placeholderText = '已为您加载草稿，请继续编辑...';

				// 场景：草稿中有一个待填写的标记 "[请补充截图说明]"
				const placeholderIndex = draft.indexOf('[请补充截图说明]');
				if (placeholderIndex !== -1) {
					// selection-start & selection-end: 自动选中这段提示文字，引导用户修改。
					this.selectionStart = placeholderIndex;
					this.selectionEnd = placeholderIndex + '[请补充截图说明]'.length;
					// cursor: 将光标定位到选中区域的开始，保证 focus 时视图正确。
					this.cursorPosition = placeholderIndex;
				}
			}
		},

		// --- 事件处理方法 ---

		/**
		 * @focus: 输入框聚焦时触发
		 * 场景：当用户点击输入框时，我们可以重置一些状态或执行分析。
		 */
		onFocus(event) {
			console.log('输入框已聚焦', '键盘高度:', event.detail.height);
			this.isFocused = true;
			// 聚焦后，清除之前可能有的高亮选区
			this.selectionStart = -1;
			this.selectionEnd = -1;
		},

		/**
		 * @blur: 输入框失去焦点时触发
		 * 场景：当用户点击页面其他地方导致键盘收起时，自动保存草稿。
		 */
		onBlur(event) {
			console.log('输入框已失焦', '当前内容:', event.detail.value, '光标位置:', event.detail.cursor);
			this.isFocused = false;
			if (this.feedbackText.length > 0 && !this.isSubmitted) {
				uni.setStorageSync('feedback_draft', this.feedbackText);
				console.log('内容已自动保存为草稿。');
			}
		},

		/**
		 * @input: 当键盘输入时触发
		 * 场景：实时更新字数统计，并可以进行输入内容的实时分析（如关键词检测）。
		 */
		onInput(event) {
			const value = event.detail.value;
			this.feedbackText = value;
			this.charCount = value.length;
			// 动态改变键盘按钮
			if (value.length < 10) {
				this.confirmType = 'done'; // 内容太短，显示“完成”
			} else {
				this.confirmType = 'send'; // 内容足够，显示“发送”
			}
		},

		/**
		 * @confirm: 点击完成（或发送/搜索等）按钮时触发
		 * 场景：执行最终的提交操作。
		 */
		onConfirm(event) {
			if (this.feedbackText.length < 10) {
				uni.showToast({ title: '反馈内容不能少于10个字', icon: 'none' });
				return;
			}

			console.log('提交反馈内容:', event.detail.value);
			this.isSubmitting = true; // 模拟开始提交
			// confirm-hold 生效，键盘不会立即收起

			// 模拟网络请求
			setTimeout(() => {
				this.isSubmitted = true; // disabled 属性将生效
				this.isSubmitting = false; // confirm-hold 失效
				uni.hideKeyboard(); // 手动隐藏键盘
				uni.removeStorageSync('feedback_draft'); // 清除草稿
				uni.showToast({ title: '反馈提交成功！', icon: 'success' });
			}, 1500);
		},

		/**
		 * @linechange: 输入框行数变化时调用
		 * 场景：可以用于统计行数，或在特定行数时给予提示。
		 */
		onLineChange(event) {
			console.log('行数发生变化:', event.detail);
			if (event.detail.lineCount > 10) {
				console.log('提示：您的反馈内容已超过10行，非常详细！');
			}
		},

		/**
		 * @keyboardheightchange: 键盘高度发生变化时触发
		 * 场景：在一些需要精确布局的页面，可以根据这个事件来调整其他UI元素的位置。
		 */
		onKeyboardHeightChange(event) {
			console.log('键盘高度变化:', event.detail.height);
			// 例如: if (event.detail.height > 0) { this.adjustOtherUI(); }
		}
	}
};
</script>

<style scoped>
.feedback-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #f8f8f8;
	padding: 20rpx;
	box-sizing: border-box;
	border-top: 1rpx solid #eee;
}

.feedback-textarea {
	width: 100%;
	min-height: 120rpx; /* auto-height 生效时，此为初始高度 */
	background-color: #fff;
	padding: 16rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	border-radius: 8rpx;
}

/* /deep/ 用于穿透 scoped 样式，影响组件内部类 */
/deep/ .textarea-placeholder {
	color: #999999;
	font-size: 28rpx;
}

.char-counter {
	text-align: right;
	font-size: 24rpx;
	color: #666;
	margin-top: 10rpx;
}

.submission-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.7);
	color: #007aff;
	font-weight: bold;
}
</style>
